<template>
  <div class="view-pic">
    <van-image-preview v-model="viewPic.show" :images="viewPic.urls"></van-image-preview>
  </div>
</template>

<script>
import {SPLIT_BLANK, SPLIT_COMMA} from "@/api/enum";
import {loadPic} from "@/components/file-upload/upload_file";

export default {
  name: "viewPic",
  data() {
    return {
      /* 图片预览 */
      viewPic: {
        show: false,
        urls: []
      },
    }
  },
  methods: {
    /* 查看图片 */
    viewPicFn(row) {
      const that = this;
      that.viewPic.urls.splice(0, that.viewPic.urls.length);
      if(!row.picObjs) {
        row.picObjs = [];
      } else if(row.picObjs.length > 0) {
        row.picObjs.forEach(picObj => {
          that.viewPic.urls.push(picObj.url);
        });
        that.viewPic.show = true;
        return;
      }
      if(!row.pics) {
        row.pics = SPLIT_BLANK;
      }
      let pics = row.pics.split(SPLIT_COMMA);
      that.viewPicSubFn(row, pics, 0);
    },
    viewPicSubFn(row, pics, index) {
      const that = this;
      let pic = pics[index];
      loadPic(that, pic, picUrl => {
        row.picObjs.push({
          name: pic,
          url: picUrl
        });
        that.viewPic.urls.push(picUrl);
        ++index;
        if(pics.length > index) {
          that.viewPicSubFn(row, pics, index);
        } else {
          that.viewPic.show = true;
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.view-pic {

}
</style>